<template>
	<view class="bank_card_management">
		<view class="bank_card_item" v-for="item in data.list" :key="item">
			<view class="bank_card_info">
				<image class="bank_img" :src="item.bankLogo"></image>
				<view class="bank_card_name_box">
					<view class="bank_card_name">{{item.bankName}}</view>
					<view class="bank_card_no">*****{{item.bankAccount.substring(item.bankAccount.length - 4)}}</view>
				</view>
			</view>
			<view class="xjs-btn-primary Unbind_btn" @click="UnbindBankCard(item)">解绑</view>
		</view>
		<view class="footer_btn_box" @click="addCard">
			<view class="xjs-btn-primary">新增银行卡</view>
		</view>
	</view>
	<view class="noCardRecord" v-if="data.loading">
	  <view class="noCardText">您还没有添加银行卡～</view>
	  <view class="xjs-btn-primary add_btn" @click="addCard">去添加银行卡</view>
	</view>
	<uni-popup ref="popupRef" type="center" :is-mask-click="false">
		<view class="unbind_pop">
			<view class="pop_title linehei1">请输入支付密码</view>
			<view class="unbind_text linehei1">解绑银行卡</view>
			<view class="bank_card ">{{data.unbind.bankName}}(*****{{data.unbind.bankAccount}})</view>
			<input class="pwd_input" maxlength="6" v-model="data.pwd" password type="number" />
			<view class="pop_footer_btn">
				<view class="cancel_btn" @click="handleCancel()">取消</view>
				<view class="xjs-btn-primary confirm_btn" @click="confirmUnBind(data.unbind.id)">确认解绑</view>
			</view>
		</view>
	</uni-popup>
</template>
<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	import { onShow } from '@dcloudio/uni-app'
	import CryptoJS from 'crypto-js';
	import api from '@/api'
	let data = reactive<any>({
		list: [],
		page: 1,
		limit: 20,
		unbind:{},
		pwd:'',
		loading:false
	})
	const getList = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/bank-card/page`,
			data:{
				page: data.page,
				limit: data.limit,
			}
		})
		if (res.data.records&&res.data.records.length == 0) {
			data.loading = true
		}else{
			data.loading = false
		}
		data.list = res.data.records

	}
	let popupRef = ref()
	const confirmUnBind = async (id: any) => {
		if(!data.pwd){
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			})
			return
		}
		// 密码用AES加密
		let key = CryptoJS.enc.Utf8.parse('xuelanfang123456')
		let iv = key
		let encryptedPasswd = CryptoJS.AES.encrypt(
			data.pwd,
			key, {
				iv: iv,
				mode: CryptoJS.mode.CBC,
				padding: CryptoJS.pad.ZeroPadding
			}
		)
		let pwdPay = encodeURIComponent(encryptedPasswd.toString())
		const res1 : any = await api({
			method: 'DELETE',
			url: `/mall/bank-card/${id}?pwd=${pwdPay}`
		})
		data.pwd = ''
		if(res1.code=='0'){
			uni.showToast({
				title: '解绑成功',
				icon: 'none'
			})
			getList()
		}else{
			uni.showToast({
				title: res1.msg,
				icon: 'none'
			})
		}
		popupRef.value.close()
	}
	
	const UnbindBankCard = (item) => {
		if(!userInfo.value.paymentPassword){
			uni.showModal({
				content: '还未设置支付密码',
				confirmText:'去设置',
				success: function (res) {
					if (res.confirm) {
						uni.navigateTo({
							url:'/pages/myStudio/studio/setPaymentPassword/index'
						})
					}
					if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return
		}
		item.bankAccount = item.bankAccount.substring(item.bankAccount.length - 4)
		data.unbind = item
		popupRef.value.open()
	}
	const handleCancel = () => {
		data.pwd = ''
		popupRef.value.close()
	}
	const addCard = () => {
		uni.navigateTo({
			url: '/pages/myStudio/studio/addBankCard/index'
		})
	}
	onShow(() => {
		uni.setNavigationBarTitle({
			title: '银行卡管理'
		});
		getList()
	})
</script>

<style scoped lang="scss">
	.noCardRecord {
		margin-top: 50%;
		.noCardText {
			text-align: center;
			font-size: 32rpx;
		}
		.add_btn {
			width: 376rpx;
			margin: 32rpx auto;
			font-size: 28rpx;
		}
	}
	.linehei1{
		line-height: 1;
	}
	.bank_card_management {
		padding: 32rpx;
		box-sizing: border-box;
		padding-bottom: calc(var(--safe-area-bottom) + 104rpx + 32rpx);

		.bank_card_item {
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.bank_card_info {
				display: flex;
				flex-direction: row;

				.bank_img {
					width: 44rpx;
					height: 44rpx;
					margin-top: 2rpx;
				}

				.bank_card_name_box {
					margin-left: 16rpx;

					.bank_card_name {
						font-weight: 500;
						font-size: 30rpx;
						color: #1A1A1A;
					}

					.bank_card_no {
						font-weight: 400;
						font-size: 26rpx;
						color: #808080;
						margin-top: 16rpx;
					}
				}
			}

			.Unbind_btn {
				width: 154rpx;
				height: 76rpx;
			}
		}

		.footer_btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #FFFFFF;
			padding: 8rpx 40rpx;
			box-sizing: border-box;
			padding-bottom: calc(var(--safe-area-bottom) + 8rpx);
		}
	}

	.unbind_pop {
		width: 622rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 64rpx 40rpx;
		box-sizing: border-box;
		text-align: center;

		.pop_title {
			font-weight: 500;
			font-size: 40rpx;
			color: #1B2120;

		}

		.unbind_text {
			margin-top: 48rpx;
			font-size: 30rpx;
			color: #1B2120;
		}

		.bank_card {
			margin-top: 24rpx;
			font-size: 48rpx;
			color: #1B2120;
			font-weight: bold;
		}

		.pwd_input {
			width: 100%;
			height: 128rpx;
			background: #F5F6F7;
			border-radius: 32rpx;
			border: 2rpx solid #F9F6F6;
			margin-top: 48rpx;
			font-size: 48rpx;
		}

		.pop_footer_btn {
			display: flex;
			justify-content: space-between;
			margin-top: 48rpx;

			.cancel_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 263rpx;
				height: 88rpx;
				background-color: #FFFFFF;
				border-radius: 44rpx;
				border: 2rpx solid #FF6084;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF6084;

			}

			.confirm_btn {
				width: 263rpx;
				height: 88rpx;
			}
		}
	}
</style>